<template>
	<div class="main-container-wrapper">
		<van-nav-bar title="通知公告详情" safe-area-inset-top fixed left-text="返回" left-arrow @click-left="back"></van-nav-bar>
		<div class="notice-bar"></div>
		<div style="overflow-x: hidden">
			<v-form-render v-show="!subLoading" ref="formRef" :form-json="formJson" :form-data="formData" :option-data="optionData">
				<template #slot-txt-time>
					<span>发布时间：</span>
				</template>
			</v-form-render>
		</div>
		<van-back-top offset="1000" />
	</div>
</template>
<script setup>
import formJson from './formConfig/detail.json';
import { useRoute, useRouter } from 'vue-router';
import { getNnoticeDetail } from '/@/api/notice';
const route = useRoute();
const Router = useRouter();
const formRef = ref();
const formData = ref({});
let optionData = {};
const subLoading = ref(false);
onMounted(() => {
	subLoading.value = true;
	showLoadingToast({
		message: '加载中...',
		forbidClick: true,
		loadingType: 'spinner',
	});
	nextTick(() => {
		formRef.value.setReadMode(true);
	});
	if (route.query.id) {
		getNnoticeDetail(route.query.id)
			.then((res) => {
				if (res.ok) {
					const row = res.data;
					const titleTxt = formRef.value.getWidgetRef('title');
					const publishTimeTxt = formRef.value.getWidgetRef('publishTime');
					const summaryTxt = formRef.value.getWidgetRef('summary');
					const attachmentListRef = formRef.value.getWidgetRef('attachmentList');
					titleTxt.field.options.textContent = row.title;
					publishTimeTxt.field.options.textContent = row.publishTime || '暂未发布';
					summaryTxt.field.options.textContent = row.summary;
					row.attachmentList = JSON.parse(row.attachmentList);
					if (!row.attachmentList || row.attachmentList.length == 0) {
						attachmentListRef.setHidden(true);
					} else {
						attachmentListRef.setHidden(false);
					}
					// console.log(row)
					formData.value = row;
					formRef.value.setFormData(formData.value);
				}
			})
			.finally(() => {
				subLoading.value = false;
				closeToast();
			});
	} else {
		showToast('暂无详情参数');
		setTimeout(() => {
			back();
		}, 300);
	}
});

const back = () => {
	Router.back();
};
</script>

<style scoped lang="scss">
.main-container-wrapper {
	width: 100%;
	height: 100%;
	overflow-y: auto;
	font-size: 14px;
	background-color: #fff;

	.notice-bar {
		margin-top: 46px;
	}
}

:deep(.vform3-margin-auto .el-form-item__content) {
	display: flex;
	justify-content: center;
}

:deep(.vform3-artice-title) {
	font-weight: 400 !important;
	color: #303133 !important;
}

:deep(.readonly-mode-field) {
	min-height: 0 !important;
}

:deep(.readonly-mode-form .el-form-item__content) {
	background-color: #fff !important;
}
</style>
